<style>
.phone-cont {
    width:100%;
    height:600px;
    background:rgba(255,255,255,1);
    padding-top:60px;
}

.icona {
    position: relative;
    z-index: 9;
    color:#5979F8;
    height: 40px;
    display: inline-block;
}

.icona.forbidden {
    color:#C1C6D4;
}

</style>

<template>
    <section>
        <section class="phone-cont">
            <!-- 修改手机号 -->
            <el-form :model="phoneform" :rules="rules" ref="phoneform"  label-width="200px" class="demo-ruleForm business">
                <el-form-item label="手机号">
                    <span>{{Mobile}}</span>
                </el-form-item>
                <el-form-item label="新手机号" prop="newMobile" >
                    <el-input type="text" v-model="phoneform.newMobile" maxlength="11" placeholder="请输入手机号"></el-input>
                </el-form-item>

                <el-form-item label="验证码" prop="code">
                    <div class="cl-child">
                        <el-input v-model="phoneform.code" maxlength="6" type="text" placeholder="请输入验证码"></el-input>
                        <a href="#" title="" class="icona" style="margin-left:-90px" @click="triggerFn" v-if="time == 60">获取验证码</a>
                        <a href="#" title="" class="icona forbidden" style="margin-left:-120px" v-else>{{time}} 秒后重新发送</a>
                    </div>
                </el-form-item>

                <el-form-item class="mt20">
                    <el-button type="primary" class="btn-or btn-active"  @click="submitFn">确定</el-button>
                </el-form-item>
            </el-form>
        </section>
    </section>
</template>
<script>
    import com from 'js/common.js'
    import qs from 'qs'

    export default {
        data() {
            let validPhone = (rule, value,callback)=>{ // 只能手机号码
                if (!value){
                    callback(new Error('请输入联系电话'))
                }else  if(!(/^1\d{10}$/.test(value))){
                    callback(new Error('手机号码有误，请重填'))
                    return false
                }else{
                    callback();
                }

            };
            return {
                Mobile:'',
                phoneform:{
                    newMobile:'',
                    code:''
                },
                // '设置','企业账户管理','手机号码更换'
                path:[
                    {
                        'name':'设置',
                        'path':'/university/basic-settings'
                    },
                    {
                        'name':'企业账户管理',
                        'path':'/university/basic-settings?step=3'
                    },
                    {
                        'name':'手机号码更换',
                        'path':''
                    }
                ],
                time:60,
                rules:{
                    newMobile:[
                        { required: true, message: '请输入联系电话', trigger: 'blur' },
                        { trigger: 'blur', validator: validPhone }
                    ],

                    code:[
                        { required: true, message: '请输入验证码', trigger: 'blur' }
                    ]
                }
            }
        },
        mixins: [mixinMethods],

        watch: {
            'phoneform.newMobile'(value) {
                this.$nextTick(() => {
                    this.phoneform.newMobile = value.replace(/\D/g, '')
                })
            },
            'phoneform.code'(value) {
                this.$nextTick(() => {
                    this.phoneform.code = value.replace(/\D/g, '')
                })
            }
        },

        methods:{
            changeMobile() {
                axios.post('/com/member/changeMobile', qs.stringify({
                    'newMobile': this.phoneform.newMobile,
                    'code': this.phoneform.code
                })).then( (res) => {
                    let d = res.data
                    if(d.flag == 1){
                        this.$router.push({name:'universityBasicSettings',query:{ step:3}})
                    } else {
                        this.$message.error(d.msg);
                    }
                });
            },

            submitFn() {
                this.$refs.phoneform.validate((valid) => {
                    if (valid) {
                        this.changeMobile()
                    } else {
                        this.$message.error('请填写完整再保存');
                    }
                })
            },

            getCode() {
                this.time --
                let t = setTimeout(()=>{
                    this.getCode()
                },1000)

                if(this.time <= 0) {
                    this.time = 60
                    clearTimeout(t)
                }
            },

            // /api/system/sendMobileCode
            triggerFn() {
                this.$refs.phoneform.validateField('newMobile', (v)=>{
                    if(v == '') {
                        this.getCode()
                        this.getCodeAjax()
                    }
                })
            },

            getCodeAjax() {
                axios.post('/api/system/sendMobileCode', qs.stringify({
                    'mobile': this.phoneform.newMobile.trim(),
                    'type':4
                })).then( (res) => {
                    let d = res.data
                    if(d.flag == 1){

                    } else {
                        this.$message.error(d.msg);
                    }
                })
            }
        },

        mounted() {
            this.$store.commit('setPath', this.path)
            this.Mobile = this.$route.query.Mobile
        }
    }
</script>
